<script>
import {Button, Divider} from 'ant-design-vue';

export default {
  name: 'FormulaActionsForSQL',
  render(h) {
    return h('div', {class: 'h-flow-formula-action'}, this.renderActions(h));
  },
  data() {
    return {
      actions: [
        {type: 'button', name: '+', value: ' + '},
        {type: 'button', name: '-', value: ' - '},
        {type: 'button', name: '*', value: ' * '},
        {type: 'button', name: '/', value: ' / '},
        {type: 'button', name: '(', value: ' ( '},
        {type: 'button', name: ')', value: ' ) '},

        {type: 'divider'},
        {type: 'button', name: '=', value: ' = '},
        {type: 'button', name: '!=', value: ' != '},
        {type: 'button', name: '>=', value: ' >= '},
        {type: 'button', name: '<=', value: ' <= '},
        {type: 'button', name: '<', value: ' < '},
        {type: 'button', name: '>', value: ' > '},

        {type: 'divider'},
        {type: 'button', name: 'and', value: ' and '},
        {type: 'button', name: 'or', value: ' or '},
        {type: 'button', name: 'not', value: ' not '},

        {type: 'divider'},
        {type: 'button', name: '包含', value: ' like(包含, 被包含) '},
        {type: 'button', name: '不包含', value: ' not like(包含, 被包含) '},
        {type: 'button', name: 'in', value: ' in(字段, 取值) '},

        {type: 'divider'},
        {type: 'extend', name: '扩展取值', value: ''},
      ]
    };
  },
  methods: {
    renderActions(h) {
      return this.actions.map(action => this.renderAction(h, action));
    },
    renderAction(h, action) {
      return this[`${action.type}Render`](h, action);
    },
    dividerRender(h, action) {
      return h(Divider, {class: 'h-flow-action-divider'});
    },
    clickButton(action) {
      this.$emit('addAction', action);
    },
    extendRender(h, action) {
      let that = this

      return h(Button, {
        on: {
          click: () => {
            that.$emit('extend');
          }
        }
      }, ['扩展']);
    },
    buttonRender(h, action) {
      return h(Button, {
        class: 'h-flow-action-button',
        on: {
          click: () => this.clickButton(action)
        }
      }, [action.name]);
    },
  }
};
</script>
<style>
.h-flow-formula-action {
  padding: 15px 0 0 15px;
}

.h-flow-action-button {
  margin-right: 15px;
  margin-bottom: 10px;
}

.h-flow-formula-action .h-flow-action-divider {
  margin: 5px 0 15px 0;
}
</style>